<template>
    <div class="tools-container">
        <header class="header">
            <h1>GitHub 开源工具集</h1>
            <p class="subtitle">发现有趣、实用的开源工具</p>

            <div class="search-bar">
                <input v-model="searchQuery" type="text" placeholder="搜索工具..." @input="filterTools" />
                <button class="search-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        viewBox="0 0 16 16">
                        <path
                            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                    </svg>
                </button>
            </div>
        </header>

        <div class="filter-section">
            <div class="category-tabs">
                <button v-for="category in categories" :key="category" :class="{ active: activeCategory === category }"
                    @click="setActiveCategory(category)">
                    {{ category }}
                </button>
            </div>
        </div>

        <div class="tools-grid">
            <div v-for="tool in filteredTools" :key="tool.id" class="tool-card">
                <div class="tool-header">
                    <h3>{{ tool.name }}</h3>
                    <span class="stars">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
                            viewBox="0 0 16 16">
                            <path
                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg>
                        {{ tool.stars }}
                    </span>
                </div>
                <p class="description">{{ tool.description }}</p>
                <div class="tool-footer">
                    <a :href="tool.url" target="_blank" class="github-link">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            viewBox="0 0 16 16">
                            <path
                                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
                        </svg>
                        GitHub
                    </a>
                    <span class="language" :style="{ backgroundColor: getLanguageColor(tool.language) }">
                        {{ tool.language }}
                    </span>
                </div>
            </div>
        </div>

        <div v-if="filteredTools.length === 0" class="no-results">
            <p>没有找到匹配的工具 😢</p>
            <button @click="resetFilters">重置筛选</button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 示例数据 - 实际应用中可以从API获取
const tools = ref([
    {
        id: 1,
        name: 'Vue.js',
        description: '渐进式JavaScript框架，用于构建用户界面',
        url: 'https://github.com/vuejs/vue',
        stars: '200k',
        language: 'JavaScript',
        category: '前端框架'
    },
    {
        id: 2,
        name: 'React',
        description: '用于构建用户界面的JavaScript库',
        url: 'https://github.com/facebook/react',
        stars: '198k',
        language: 'JavaScript',
        category: '前端框架'
    },
    {
        id: 3,
        name: 'VS Code',
        description: '微软开发的轻量级代码编辑器',
        url: 'https://github.com/microsoft/vscode',
        stars: '138k',
        language: 'TypeScript',
        category: '开发工具'
    },
    {
        id: 4,
        name: 'TensorFlow',
        description: '端到端开源机器学习平台',
        url: 'https://github.com/tensorflow/tensorflow',
        stars: '170k',
        language: 'Python',
        category: '机器学习'
    },
    {
        id: 5,
        name: 'Homebrew',
        description: 'macOS和Linux的包管理器',
        url: 'https://github.com/Homebrew/brew',
        stars: '35k',
        language: 'Ruby',
        category: '开发工具'
    },
    {
        id: 6,
        name: 'Excalidraw',
        description: '虚拟白板，用于绘制手绘风格的图表',
        url: 'https://github.com/excalidraw/excalidraw',
        stars: '42k',
        language: 'TypeScript',
        category: '设计工具'
    }
])

const categories = computed(() => {
    const uniqueCategories = new Set(tools.value.map(tool => tool.category))
    return ['全部', ...Array.from(uniqueCategories)]
})

const activeCategory = ref('全部')
const searchQuery = ref('')

const filteredTools = computed(() => {
    let result = tools.value

    // 按类别筛选
    if (activeCategory.value !== '全部') {
        result = result.filter(tool => tool.category === activeCategory.value)
    }

    // 按搜索词筛选
    if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(tool =>
            tool.name.toLowerCase().includes(query) ||
            tool.description.toLowerCase().includes(query) ||
            tool.language.toLowerCase().includes(query)
        )
    }

    return result
})

function setActiveCategory(category) {
    activeCategory.value = category
}

function filterTools() {
    // 搜索功能已在计算属性中实现
}

function resetFilters() {
    activeCategory.value = '全部'
    searchQuery.value = ''
}

function getLanguageColor(language) {
    // 简单地为不同语言设置不同颜色
    const colors = {
        'JavaScript': '#f1e05a',
        'TypeScript': '#3178c6',
        'Python': '#3572A5',
        'Ruby': '#701516',
        'Java': '#b07219',
        'C++': '#f34b7d',
        'Go': '#00ADD8',
        'Rust': '#dea584',
        'PHP': '#4F5D95',
        'Shell': '#89e051'
    }
    return colors[language] || '#cccccc'
}
</script>

<style scoped>
.tools-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header {
    text-align: center;
    margin-bottom: 2rem;
}

.header h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.search-bar {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
}

.search-bar input {
    flex: 1;
    padding: 0.8rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.search-bar input:focus {
    border-color: #0366d6;
}

.search-btn {
    padding: 0 1.2rem;
    background-color: #0366d6;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-btn:hover {
    background-color: #0556a8;
}

.filter-section {
    margin-bottom: 2rem;
}

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.category-tabs button {
    padding: 0.5rem 1rem;
    background-color: #f6f8fa;
    border: 1px solid #d1d5da;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.category-tabs button:hover {
    background-color: #e1e4e8;
}

.category-tabs button.active {
    background-color: #0366d6;
    color: white;
    border-color: #0366d6;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tool-card {
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 1.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tool-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #0366d6;
}

.stars {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #586069;
    font-size: 0.9rem;
}

.description {
    color: #586069;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.tool-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.github-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #0366d6;
    text-decoration: none;
    font-size: 0.9rem;
}

.github-link:hover {
    text-decoration: underline;
}

.language {
    padding: 0.2rem 0.5rem;
    border-radius: 100px;
    font-size: 0.8rem;
    color: white;
}

.no-results {
    text-align: center;
    padding: 3rem;
    color: #586069;
}

.no-results button {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #f6f8fa;
    border: 1px solid #d1d5da;
    border-radius: 6px;
    cursor: pointer;
}

.no-results button:hover {
    background-color: #e1e4e8;
}

@media (max-width: 768px) {
    .tools-grid {
        grid-template-columns: 1fr;
    }

    .header h1 {
        font-size: 2rem;
    }
}
</style>